<template>
  <div class="common-wrapper">
    <div class="common-search">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="名称">
          <a-input v-model="queryForm.role_name" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="getTableData" type="primary" icon="search" class="l-mg-r10">搜索</a-button>
          <a-button @click="onAdd" type="primary" icon="plus" class="l-mg-r10">添加</a-button>
          <!-- <a-button @click="onEdit" type="primary" icon="edit" class="l-mg-r10" :disabled="selectedRowKeys.length === 1 ? false : true">修改</a-button> -->
          <a-button @click="onDel" type="danger" icon="delete" class="l-mg-r10" :disabled="!hasSelected"
            >删除</a-button
          >
          <a-button @click="onRole" type="primary" icon="form" class="l-mg-r10" :disabled="selectedRowKeys.length === 1 ? false : true"
            >分配菜单</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="common-main">
      <a-table
        size="middle"
        rowKey="pkey"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :scroll="{ y: 500, x: 1200 }"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
      <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button @click="onEdit(record)" type="link" icon="edit" size="small">修改</a-button>
        </template>
      </a-table>
    </div>
    <RoleForm ref="roleFormRef" />
    <RoleAllotForm ref="roleAllotFormRef" @success="onMenuSave" />
  </div>
</template>
  
  <script>
import RoleForm from './components/roleForm.vue'
import RoleAllotForm from './components/authorityForm.vue'
import { getRoleListApi, delRoleApi } from '@/api/manager'

export default {
  components: {
    RoleForm,
    RoleAllotForm,
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data() {
    const columns = [
    {
        title: '编号',
        dataIndex: 'pkey',
        align: 'center',
        width: 50,
        // scopedSlots: { customRender: 'index' },
      },
      {
        title: '角色名称',
        dataIndex: 'role_name',
        align: 'center',
        width: 250,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: 100,
        fixed: 'right',
        scopedSlots: { customRender: 'action' },
      }
    ]
    return {
      queryForm: {
        role_name: '',
      },
      columns,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 99999,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        total: 0,
      },
      loading: false,
      dataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    onAdd() {
      this.$refs.roleFormRef.add()
    },
    onEdit(row) {
      this.$refs.roleFormRef.edit(row)
    },
    onMenuSave() {
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    onDel() {
      this.$confirm({
        title: '提示',
        content: '确定删除吗？',
        onOk: async () => {
          const { statusCode, errors } = await delRoleApi({
            pkeys: this.selectedRowKeys,
          })
          if (statusCode == 200) {
            this.$message.success('删除成功！')
            this.selectedRowKeys = []
            this.getTableData()
          } else {
            this.$message.error(errors)
          }
        },
      })
    },
    onRole() {
      this.$refs.roleAllotFormRef.edit(this.selectedRowKeys[0])
    },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    // 获取权限列表
    async getTableData() {
      this.loading = true
      const { data } = await getRoleListApi({
        ...this.queryForm,
        page_index: this.pagination.current,
        page_size: this.pagination.pageSize,
      })
      this.loading = false
      this.dataSource = data
      this.pagination.total = data.length
    },
  },
}
</script>
  
  <style lang="less" scoped>
</style>